<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">

<body>
<wicket:panel>

	<div class="accordion-item" id="settingsGradingSchemaHeader">
		<h2 class="accordion-header">
			<button wicket:id="settingsGradingSchemaAccordionButton" class="accordion-button collapsed fw-bold"
				type="button"
				data-bs-toggle="collapse"
				data-bs-target="#settingsGradingSchema"
				aria-expanded="false"
				aria-controls="settingsGradingSchema">
				<wicket:message key="settingspage.gradingschema.heading">Grading Schema</wicket:message>
			</button>
		</h2>
		<div wicket:id="settingsGradingSchemaPanel" id="settingsGradingSchema" class="accordion-collapse collapse" aria-labelledby="settingsGradingSchemaHeader">
			<div class="accordion-body">

				<div class="container-fluid">
					<div class="row">
						<div class="col-md-3 gb-schema-table">
							
							<!--  schema selector --> 
							<div class="form-group">
								<label for="gradingschemaType"><wicket:message key="settingspage.gradingschema.type" /></label>
								<select wicket:id="type" id="gradingschemaType" class="select">
									<option>Letter Grade</option>
								</select>
							</div>
							
							<!--  message about duplicates -->
							<div class="sak-banner-error" wicket:id="duplicateEntries">Duplicates found.</div>
						
							<!--  schema table -->
							<div wicket:id="schemaWrap">
								<table class="table table-striped table-bordered table-hover" style="width: auto;" id="table-grading-schema">
									<thead>
									<tr>
										<th class="col-md-1"><wicket:message key="settingspage.gradingschema.grade" /></th>
										<th class="col-md-1"><wicket:message key="settingspage.gradingschema.minpercent" /></th>
										<th class="col-md-1"><wicket:message key="settingspage.gradingschema.removecolhead" /></th>
									</tr>
									</thead>
									<tbody>
									<tr wicket:id="schemaView" class="gb-schema-row">
										<td><input wicket:id="grade" type="text" size="10" class="form-control schema-input" /></td>
										<td><input wicket:id="minPercent" type="text" size="10" class="form-control schema-input" /></td>
										<td><button wicket:id="remove" type="button" class="btn btn-outline-secondary"><wicket:message key="button.remove" /></button></td>
									</tr>
									</tbody>
								</table>
								
								<div>
									<button wicket:id="addMapping" type="button" class="btn-link btn-add-mapping btn btn-default btn-sm"><wicket:message key="settingspage.gradingschema.add" /></button>
								</div>
							</div>
														
						</div>
						
						<div class="col-md-8">
													
							<!-- chart -->
							<div>
								<div wicket:id="noStudentsWithGradesMessage" class="sak-banner-info">There are no students with grades</div>
								<canvas wicket:id="gradingSchemaChart" id="gradingSchemaChart" class="gb-schema-chart"></canvas>
							</div>
			
							<!--  stats -->
							<div wicket:id="statsWrap">
								<div wicket:id="stats"></div>
							</div>
								
							<!-- info about students with course grade overrides -->						
							<wicket:enclosure child="studentsWithCourseGradeOverrides">
								<div class="instruction">
									<p><wicket:message key="settingspage.gradingschema.overrides" /></p>
									<ul wicket:id="studentsWithCourseGradeOverrides">
										<li wicket:id="name" />
									</ul>
								</div>
							</wicket:enclosure>
						</div>
					</div>
				</div>
				<div class="sak-banner-warn" wicket:id="modifiedSchema">Schema has been modified from default</div>
				<div class="sak-banner-error" wicket:id="unsavedSchema">There are unsaved changes</div>
				
			</div>
		</div>
	</div>

</wicket:panel>
</body>
</html>
